html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.wrapper .font {
  background-image: transparent;
  color: transparent;
}
.text_style {
  background-image: linear-gradient(#02ecff, #1289ff);
  -webkit-background-clip: text;
}
.wrapper .font2 {
  background-image: linear-gradient(135deg, #02ecff, #1289ff);
  -webkit-background-clip: text;
  color: transparent;
}
.wrapper {
  width: 100%;
  height: 100%;
  background-color: #021036;
}

.tip {
  color: red;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
  position: relative;
  display: none;
}
.tip .icon {
  position: absolute;
  right: 2%;
  top: 50%;
  transform: translateY(-50%);
  font-style: normal;
  font-weight: normal;
  cursor: pointer;
}
.wrapper .header {
  height: 8%;
  width: 100%;
  background: url(../images/screen/header.png) no-repeat top center/100% 100%;
  position: relative;
  color: #fff;
}
.wrapper .header .title {
  font-size: 30px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-weight: bold;
}
.wrapper .header .date {
  position: absolute;
  right: 2%;
  top: 24%;
  font-weight: bold;
  white-space: nowrap;
}
.wrapper .header .date .text_1 {
  font-size: 16px;
  margin-right: 2%;
}
.wrapper .header .date .text_2 {
  font-size: 14px;
}
/* 内容 */
.wrapper .content {
  justify-content: space-between;
  margin: 4% 1% 0;
  height: 83.5%;
}
/* 左边部分 */
.wrapper .content .left_box,
.wrapper .content .right_box {
  width: 25%;
  float: left;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  height: 100%;
  position: relative;
}
.wrapper .content .left_box .left_title {
  position: absolute;
  left: 50%;
  top: -8%;
  transform: translateX(-50%);
  z-index: 11;
  font-size: 30px;
  font-weight: bold;
}
.content .left_box .box {
  width: 100%;
  margin-bottom: 9%;
  background: url(../images/screen/border_1.png) no-repeat center center / 100% 100%;
}

.content .left_box .box_ht1 {
  height: 52%;
}
.content .left_box .box_ht2 {
  height: 42%;
}


.content .left_box .box:last-child {
  margin-bottom: 0;
}

.content .left_box .box .chart {
  float: left;
  width: 50%;
  height: 44%;
  position: relative;
}
.content .left_box .box .chart .chart_title {
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 15%;
  top: 18%;
}
.content .left_box .box .chart #chart1,
.content .left_box .box .chart #chart2,
.content .left_box .box .chart #chart3,
.content .left_box .box .chart #chart4 {
  width: 100%;
  height: 100%;
  padding-top: 20%;
}

.content .left_box .box .title2 {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  padding: 6% 0 0;
}
.content .left_box .box .position {
  width: 100%;
  height: 80%;
}
.content .left_box .box .position #chart5 {
  height: 100%;
  width: 100%;
}

/* 中间部分 */
.wrapper .content .center_box {
  width: 48%;
  float: left;
  margin: 0 1%;
  flex-direction: column;
  justify-content: space-between;
  color: #fff;
  height: 100%;
}
.content .center_box .box1 {
  height: 14%;
  justify-content: space-between;
  margin-bottom: 1.5%;
}
.content .center_box .box1 .item {
  width: 23.5%;
  height: 100%;
  margin-right: 1.7%;
  background-color: #040d53;
  border-radius: 10px;
  box-shadow: inset 0 0 30px 1px #030b88;
  float: left;
  position: relative;
}
.content .center_box .box1 .item .pos_item{
  position: absolute;
  top: 50%;
  left: 12%;
  transform: translateY(-50%);
}
.content .center_box .box1 .item .sum_text{
  font-weight: bold;
  font-size: 28px;
}
.content .center_box .box1 .item:last-child {
  margin-right: 0;
}

.center_box .box1 .item .title {
  color: #ffffff;
  font-size: 18px;
}
.center_box .box1 .item .sum {
  font-size: 28px;
  margin-top: 14%;
  white-space:nowrap;
}
.center_box .box1 .item .sum span {
  font-size: 16px;
  margin-left: 3%;
}
.center_box .box1 .item .color_1 {
  color: #fad752;
}
.center_box .box1 .item .color_2 {
  color: #00df64;
}
.center_box .box1 .item .color_3 {
  color: #ff7404;
}
.center_box .box1 .item .color_4 {
  color: #01c9ff;
}

.content .center_box .box2 {
  height: 83%;
  background: url(../images/screen/center_bg.png) no-repeat center center/100% 100%;
  padding: 3%;
}

.center_box .box2 .activity {
  height: 50%;
}
.center_box .box2 .activity .title {
  text-align: center;
  margin: 2% 0;
  font-weight: bold;
  font-size: 18px;
}
.center_box .box2 .activity .activity_chart {
  width: 100%;
  height: 90%;
}
.center_box .box2 .activity .activity_chart #chart6 {
  width: 100%;
  height: 100%;
}
.center_box .box2 .statistics_box {
  height: 50%;
}

.center_box .box2 .statistics_box .job {
  width: 48%;
  float: left;
  margin-right: 4%;
  height: 100%;
}
.center_box .box2 .statistics_box .job_list,
.center_box .box2 .statistics_box .com_list {
  margin-top: 4%;
  height: 79% !important;
}
.center_box .box2 .statistics_box .job .title,
.center_box .box2 .statistics_box .com .title {
  font-size: 18px;
  font-weight: bold;
}
.center_box .box2 .statistics_box .com {
  width: 48%;
  float: left;
  height: 100%;
}
.center_box .box2 .center_list {
  width: 100%;
  height: 100%;
}
.center_box .box2 .center_list .item {
  height: 20%;
  background: url(../images/screen/list_2.png) no-repeat center center / 100% 100%;
  padding-left: 5%;
  position: relative;
}
.center_box .box2 .center_list .item .text {
  position: absolute;
  left: 5%;
  top: 50%;
  transform: translateY(-50%);
}

.center_box .box2 .center_list .odd {
  background: url(../images/screen/list_1.png) no-repeat center center / 100% 100%;
}
.center_box .box2 .center_list .item .text_1 {
  color: #fff;
  font-size: 14px;
}
.center_box .box2 .center_list .item .text_2 {
  color: #a9acbc;
  font-size: 14px;
  margin: 0 2%;
}
.center_box .box2 .center_list .item .text_3 {
  color: #4296d3;
  font-size: 14px;
}

/* 右边部分 */
.content .right_box .box1 {
  height: 26%;
  background: url(../images/screen/border_1.png) no-repeat center center / 100% 100%;
  margin-bottom: 4%;
}
.content .right_box .right_title {
  font-size: 30px;
  font-weight: bold;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -8%;
}
.right_box .box1 .hot_list {
  height: 70% !important;
}
.right_box .box1 .hot_job_list {
  margin: 0 5%;
  width: 90%;
  height: 100%;
}
.right_box .box1 .hot_job_list .item {
  color: #c4c4c4;
  font-size: 14px;
  height: 20%;
}
.right_box .box1 .hot_job_list .item .idx {
  width: 8%;
  font-size: 16px;
  float: left;
}
.right_box .box1 .hot_job_list .item .idx_1 {
  color: #fb741f;
}
.right_box .box1 .hot_job_list .item .idx_2 {
  color: #fad752;
}
.right_box .box1 .hot_job_list .item .idx_3 {
  color: #fb5a5a;
}
.right_box .box1 .hot_job_list .item .job {
  width: 25%;
  float: left;
  color: #fff;
}
.right_box .box1 .hot_job_list .item .com {
  width: 40%;
  float: left;
}
.right_box .box1 .hot_job_list .item .sum {
  width: 25%;
  float: left;
}
.content .right_box .box1 .nature,
.content .right_box .box1 .scale {
  float: left;
  width: 50%;
  height: 100%;
  position: relative;
}
.content .right_box .box1 .nature .nature_title,
.content .right_box .box1 .scale .scale_title {
  font-size: 18px;
  font-weight: bold;
  position: absolute;
  left: 12%;
  top: 18%;
}
.content .right_box .box1 .hot_title {
  text-align: center;
  font-weight: bold;
  font-size: 18px;
  padding: 4% 0 2%;
}

.content .right_box .box1 .nature #chart7,
.content .right_box .box1 .scale #chart8 {
  width: 100%;
  height: 100%;
  padding-top: 20%;
}

.content .right_box .box2 {
  height: 42%;
  background: url(../images/screen/border_1.png) no-repeat center center / 100% 100%;
  position: relative;
}
.content .right_box .box2 .addr_title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  position: absolute;
  left: 50%;
  top: 7%;
  transform: translateX(-50%);
}

.content .right_box .box2 #chart9 {
  width: 100%;
  height: 100%;
}
